<html class="standard">

<head>
    <meta charset="utf-8">
    <title>客服聊天</title>
    <link href="../css/im_index/ly/c.css" type="text/css" rel="stylesheet">
    <link href="../css/im_index/ly/main.css" type="text/css" rel="stylesheet">
    <link href="../css/im_index/ly/prop-mall.css" type="text/css" rel="stylesheet">
    <link href="../css/framework/layui.css" type="text/css" rel="stylesheet">
    <!-- <link href="../css/framework/bootstrap-theme.css" type="text/css" rel="stylesheet"> -->



</head>

<body>

    <div id="wrap">
        <div id="header">
            <div class="top">
                <ul class="layui-nav">
                    <div id="top" class="top-in">
                        <li class="layui-nav-item home">
                            <a href="../html/service-home.html" class="active">{{shopName}}  客服 - 首页</a>
                        </li>
                        <li class="layui-nav-item message">
                            <a href="../html/service-chat.html" style="color:#22d7c6">消息 </a>
                        </li>
                        <li class="layui-nav-item person; width:auto;">
                            <a href="../html/service-person.html">
                                <span>
                                    {{nickname}}
                                </span>
                                &nbsp;&nbsp;<img :src="avatarUrl" class="layui-nav-img"></a>
                        </li>
                        <li class="layui-nav-item">
                                <a href="" class="active" onclick="logout()">退出</a>
                        </li>
                </ul>

            </div>
        </div>

        <div id="main">
            <div id="container">
                <div class="chat-container page-container">
                    <div class="chat-wrap">
                        <div>
                            <div id="chat-user" class="chat-user">
                                <div class="article">30天内联系人</div>
                                <div id="user-list" class="user-list" style="background-color:	#FAFAFA">
                                    <ul id="general-list" v-for="user in userList">
                                        <li id="user" class="" @click="openWindow($event, user)">
                                            <div class="figure">
                                                <img :src="user.avatarUrl">
                                            </div>
                                            <div class="text">
                                                <div class="title"><span class="time">{{user.updatedTime}}</span>
                                                    <span class="name"> {{user.userName}} </span>

                                                </div>
                                                <span class="notice-badge" v-if="user.count > 0">{{ user.count }}</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="chat-record" class="chat-record  ">
                            <div id="chatmain" class="chat-left " style="display: none ; ">
                                <div class="article">
                                    <span style="color:red"> {{userName}} </span>
                                    <span> {{status}} </span>
                                </div>
                                <div id="chat" class="chat-message" style=" ">
                                    <ul id="im-list" class="im-list">


                                    </ul>
                                </div>
                                <div class="chat-im chat-editor" style="">
                                    <div style="width:100%;height:  100;">
                                        <textarea id="sendText" style="line-height: 1;width: 100%;height: 100%; resize: none;
                                            border: 1px solid white; ">{{sendText}}</textarea>
                                    </div>
                                    <div class="send" style="margin-top:8px;">
                                        <button class="layui-btn layui-btn-sm" style=" float:right;"
                                            @click="webSocketSendMessage()">发送</button>
                                    </div>
                                </div>

                            </div>
                            <div id="tips" class="tips" style="display: ;">
                                <p><b>Tips：</b>与您进行过沟通的用户都会在左侧列表中显示</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>




    </div>
            
    <script src="../js/framework/vue.js"></script>
    <script src="../js/framework/layui.js"></script>
    <script src="../js/framework/jquery-3.2.1.min.js"></script>
    <script src="../js/framework/stomp.min.js"></script>
    <script src="../js/framework/sockjs.min.js"></script>
    <script src="../js/im_index/commons.js"></script>
    <script src="../js/framework/bootstrap.min.js"></script>



    <script>
        checkRole(1)
        checkLogin()


        var aid = localStorage.getItem("aid");
        var account = localStorage.getItem("account");
        var role = localStorage.getItem("role");
        var serviceId = GetQueryString("serviceId");
        var userAvatarUrl = localStorage.getItem("avatarUrl");

        $(function () {

            // 个人信息初始化
            topinfo.nickname = localStorage.getItem("nickname");
            topinfo.avatarUrl = localStorage.getItem("avatarUrl");

            // 商店名字
            url = "http://localhost:8080/user/getShopName?serviceName=" + topinfo.nickname;
            $.ajax({
                url: url,
                type: 'get',
                contentType: 'application/json; charset=UTF-8',
                success: function (userList) {
                    topinfo.shopName = userList.msg;
                    //   return userList
                },
                error: function () {
                    console.log("服务器获取失败");
                }
            });

            serviceList(aid)

            // 获取用户聊天列表
            // 从消息过来的
            function serviceList(aid) {
                url = "http://localhost:8080/chat/services/get?aid=" + aid
                $.ajax({
                    url: url,
                    type: 'get',
                    contentType: 'application/json; charset=UTF-8',
                    success: function (userList) {
                        console.log(userList.data)
                        userList.data.forEach(e => {
                            e.updatedTime = getMyDateMD(e.updatedTime);
                        });
                        chatlist.userList = userList.data;
                    },
                    error: function () {
                        console.log("服务器获取失败");
                    }
                });


            }

            // 从消息打开
            // 初始化  从跳转过来的打开新聊天窗口   
            function jumpInit() {
                $("#tips").css("display", "none")
                $("#chatmain").css("display", "")
                chatmain.initWebSocket(chatlist.userList[0]);
            }

        });

        // 头条个人栏
        var topinfo = new Vue({
            el: '#top',
            data: {
                nickname: "",
                avatarUrl: "",
                shopName:""
            },
            methods: {
                openChat: function (event, user) {

                },
            },
        });

        // 聊天
        var chatlist = new Vue({
            el: '#user-list',
            data: {
                userList: []
            },
            methods: {
                // 聊天列表的打开聊天
                openWindow: function (event, user) {
                    $("#tips").css("display", "none")
                    $("#chatmain").css("display", "")

                    $("#im-list").empty();

                    // 获取点击对象      
                    var el = event.currentTarget;

                    // chatmain.webSocketClose();
                    console.log(user)
                    chatmain.initWebSocket(user);
                    user.count = 0;

                }



            }
        });

        // 聊天窗口
        var chatmain = new Vue({
            el: '#chatmain',
            data: {
                userName: "",
                status: "",
                sendText: "",
                userId: "",
                ulid: "",
                webSocket: null,
                sendId: "",
                avatarUrl: "",
                message: [],
                offc:""
            },
            methods: {

                // 获取对方在线状态
                getStatus: function (userId) {
                    var upUserinfo = "http://localhost:8080/user/getStatus?receviId=" + userId;
                    $.get(upUserinfo, {
                    }, function (result) {
                        console.log(result)
                        chatmain.status = result.msg;
                    });

                },

                initWebSocket: function (user) {
                    console.log(user)
                    // 窗口数据初始化
                    this.userName = user.userName;
                    this.shop = user.shop;
                    this.userId = user.userId;
                    this.avatarUrl = user.avatarUrl;
                    this.ulid = user.ulid;
                    this.offc = user.count;
                    this.sendId = aid;

                    // 获取对方在线状态
                    chatmain.getStatus(this.userId);

                    // 打开消息聊天WebSocket
                    this.webSocket = new WebSocket('ws://localhost:8080/chat/' + this.sendId + '/' + this
                        .ulid);
                    this.webSocket.onopen = function (event) {
                        console.log('WebSocket打开连接');
                        console.log('初始消息：%c' + event.data, 'color:green');

                    };

                    /**
                     * 当服务端发来消息
                     */
                    this.webSocket.onmessage = function (event) {

                        console.log('WebSocket收到消息：%c' + event, 'color:green');
                        var message = JSON.parse(event.data)
                        console.log(message)
                        
                        // 离线消息

                        if (message.length != null) {
                            // console.log(message.length)
                            var c = 0;
                            message.forEach(m => {
                                c++;
                                if (chatmain.offc != 0 && c == message.length +1 - chatmain.offc) {
                                    $("#im-list").append('<hr>');
                                    $("#im-list").append('未读消息');
                                }
                                if (m.sendId != aid) {
                                    // 左
                                    // console.log(m.receiveId)
                                    $("#im-list").append(
                                        '<li style="margin-bottom: -25px;"><div class="message-text"><div class="figure"><img src=" ' +
                                        chatmain.avatarUrl +
                                        ' "></div><div class="text"><div><i class=" "></i>' +
                                        m.content + '</div></div></li>');
                                } else if (m.sendId == aid) {
                                    // console.log(m.sendId)
                                    $("#im-list").append(
                                        ' <li class=" " style="margin-bottom: -25px;"><div class=" " style="float:right;"><div class="text" style=""><i class=" "></i><p><span style="">' +
                                        m.content +
                                        ' </span></p></div><div class="figure"><!----><img src=" ' +
                                        userAvatarUrl +
                                        ' " class="float:right"></div></div></li>'
                                    );

                                }
                                // 时间转换
                                $("#im-list").append(
                                    ' <li class=" item-time"><span class=" time">' +
                                    getMyDate(m.sendTime) + '</span></li> <br>  ');
                            });
                        } else {
                            console.log(message)
                            var m = message;
                            if (m.sendId != aid) {
                                $("#im-list").append('<label style="color:red;">新消息</label>');
                                $("#im-list").append(
                                    '<li style="margin-bottom: -25px;"><div class="message-text"><div class="figure"><img src=" ' +
                                    chatmain.avatarUrl +
                                    ' "></div><div class="text"><div><i class=" "></i>' +
                                    m.content + '</div></div></li>');
                            } else if (m.sendId == aid) {
                                $("#im-list").append(
                                    ' <li class=" " style="margin-bottom: -25px;"><div class=" " style="float:right;"><div class="text" style=""><i class=" "></i><p><span style="">' +
                                    m.content +
                                    ' </span></p></div><div class="figure"><!----><img src=" ' +
                                    userAvatarUrl + ' " class="float:right"></div></div></li>'
                                );

                            }
                            // 时间转换
                            $("#im-list").append(' <li class=" item-time"><span class=" time">' +
                                getMyDate(m.sendTime) + '</span></li> <br>  ');
                        }
                        // $("#chat").scrollIntoView();
                        // $("#chat").scrollTop = $("#chat").scrollHeight;
                    };


                    /**
                     * 关闭连接
                     */
                    this.webSocket.onclose = function (event) {
                        console.log('WebSocket关闭连接');
                    };

                    /**
                     * 通信失败
                     */
                    this.webSocket.onerror = function (event) {
                        console.log('WebSocket发生异常');

                    };

                },
                // 发送信息
                webSocketSendMessage: function () {
                    // console.log(this.ulid, this.userId, aid)
                    this.webSocket.send(
                        JSON.stringify({
                            ulid: this.ulid,
                            receiveId: this.userId,
                            sendId: aid,
                            content: $("#sendText").val()
                        })

                    );
                    $("#sendText").val(null)
                },

                webSocketClose: function () {
                    if (this.webSocket != null) {
                        this.webSocket.onclose = function (event) {
                            console.log('WebSocket关闭连接');
                        };
                    }
                }

            }

        });
    </script>

</body>

</html>